<template>
	<view class="wrap-box">
		<!-- 进入弹框 -->

		<u-modal v-model="showinfo" @confirm="confirm" confirm-text="确认" :show-title="false" confirm-color="#E9B562">
			<view class="slot-content" style="padding: 80rpx;">
				<u-radio-group v-model="value" wrap shape="square" active-color="#E9B562" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</view>
		</u-modal>

		<!-- 购物车弹出框 -->

		<!-- 主商品 -->
		<view class="user-box" v-if="!showinfo && defOption === '选择主商品'" style="padding: 30rpx;"><commodity></commodity></view>
		<!-- 主商品 -->

		<view class="user-box" v-if="!showinfo && defOption === '自主上传'">
			<view class="content">
				<view class="shopp">
					<scroll-view scroll-y scroll-with-animation class="u-tab-view " :scroll-top="scrollTop">
						<u-modal v-model="istianjia1" mask-close-able @confirm="confirm1">
							<view class="slot-content" style="padding: 50rpx 100rpx;">
								<input type="text" value="" v-model="wdrlAmt1" placeholder="请输入添加的分类" />
							</view>
						</u-modal>
						<view class="tianjia1" @click="tianjia1"><text>添加</text></view>
						<view
							v-for="(item1, index1) in left"
							class="u-tab-item"
							:key="index1"
							:data-current="index1"
							:class="[current == index1 ? 'u-tab-item-active' : '']"
							@tap.stop="swichMenu(index1, item1.id)"
						>
							<text @longpress="frstLvllong(item1.id, item1.name)">{{ item1.name }}</text>
						</view>
						<u-mask :show="show2c" z-index="999999">
							<view class="bulletFrm33">
								<view class="shop_xx" style="padding: 29rpx;">
									<label>分类名称:</label>
									<input :value="catgNm" @input="shopname1" />
								</view>
								<view>
									<view v-if="lPressTheBox" class="choice">
										<view @click="modify1(0)" class="cancel">修改</view>
										<view @click="del1(0)" class="determine">删除</view>
									</view>
									<view v-else class="choice">
										<view @click="modify1(1)" class="cancel">修改</view>
										<view @click="del1(1)" class="determine">删除</view>
									</view>
								</view>
							</view>
						</u-mask>
					</scroll-view>
					<view class="shopp1">
						<view class="erjifenglei">
							<u-modal v-model="istianjia2" mask-close-able @confirm="confirm2">
								<view class="slot-content" style="padding: 50rpx 100rpx;">
									<input type="text" value="" v-model="wdrlAmt2" placeholder="请输入添加的分类" />
								</view>
							</u-modal>

							<text @click="tianjia2">添加</text>

							<text :class="[current1 == -1 ? 'u-tab-item-active' : '']" @tap.stop="swichMenu_a(-1, 0)">全部</text>

							<view
								style="display: inline-block;"
								v-for="(item, index) in toplist"
								:key="index"
								@tap.stop="swichMenu1(index, item.id)"
								:class="[current1 == index ? 'u-tab-item-active' : '']"
							>
								<text @longpress="frstLvllong1(item.id, item.name)">{{ item.name }}</text>
							</view>
						</view>
						<scroll-view scroll-y scroll-with-animation class="u-tab-view1" @scrolltolower="loadshop">
							<view class="u-tab-iteminfo">
								<u-upload
									ref="uUpload1"
									max-count="3"
									:action="action"
									:auto-upload="true"
									@on-success="success2"
									width="250rpx"
									height="250rpx"
									multiple
									:file-list="fileList"
									:show-progress="false"
								></u-upload>
								<view class="xingxi">
									<view class="fenl" @click="ification_xg">
										<text>{{ fneltext }}</text>
									</view>
									<view class="mingcheng"><input type="text" value="" v-model="name" focus placeholder="请输入商品名称" /></view>
									<view class="jiage">
										<view class="text"><input value="" v-model="price" placeholder="请输入商品价格" /></view>
									</view>
									<view class="tianjia22"><text class="text1" @click="selfUpload">添加商品</text></view>
								</view>
							</view>
							<view class="u-tab-item1" v-for="(item3, index3) in datainfo" :key="index3">
								<image :src="'https://whb.qianjitianxia.com' + item3.figure" mode="aspectFill"></image>
								<view class="list">
									<view class="text">{{ item3.name }}</view>
									<view class="list1">
										<text>￥{{ item3.price }}</text>
										<view @click="huoqutk(item3.id)">修改商品</view>
									</view>
								</view>
							</view>
							<u-loadmore :status="status" :loadText="loadText" />
							<u-mask :show="show2d" z-index="999999">
								<view class="bulletFrm22">
									<view class="" style="padding: 29rpx;">
										<view class="shop_xx">
											<label>商品图片:</label>
											<u-upload
												ref="uUpload"
												max-count="1"
												:action="action"
												:auto-upload="true"
												@on-success="success3"
												@on-remove="remove"
												width="250rpx"
												height="250rpx"
												multiple
												:show-progress="false"
											></u-upload>
										</view>
										<view class="shop_xx">
											<label>商品名称:</label>
											<input :value="input_a" @input="shopname" style="border-bottom: 1rpx solid #999 ; width: 250rpx;" />
										</view>
										<view class="shop_xx">
											<label>商品价格:</label>
											<input :value="input_b" @input="shoppice" style="border-bottom: 1rpx solid #999 ; width: 250rpx;" />
										</view>
									</view>
									<view class="choice">
										<view @click="choices(0)" class="cancel">取消</view>
										<view @click="choices(1)" class="determine">确定</view>
									</view>
								</view>
							</u-mask>
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- 修改分类弹窗 -->
			<u-select v-model="show_xg" mode="mutil-column-auto" :list="list_xg" @confirm="confirm_xg"></u-select>
			<u-select v-model="show_xg1" :list="list_xg1" @confirm="confirm_xg1"></u-select>
			<!-- 关注弹窗 -->
			<shopro-float-btn></shopro-float-btn>
			<!-- 连续弹窗提醒 -->
			<shopro-notice-modal></shopro-notice-modal>
			<!-- 登录提示 -->
			<shopro-login-modal></shopro-login-modal>
		</view>

		<!-- 自定义底部导航 -->

		<shopro-tabbar></shopro-tabbar>
	</view>
</template>

<script>
import shoproNoticeModal from '@/components/shopro-notice-modal/shopro-notice-modal.vue';
import { mapMutations, mapActions, mapState } from 'vuex';
import commodity from './components/commodity.vue';
export default {
	components: {
		commodity,
	},
	data() {
		return {
		
			platform: uni.getStorageSync('platform'), //当前平台。
			isRefresh: false, //更新
			scrollTop: 0, //页面滚动距离
			bgcolor: '',
			money: {},
			show: false,
			current: 0, // 预设当前项的值
			show11: false, //店铺信息
			show22: false, //商品信息
			show33: false, //购物车弹出框
			uid: '',
			sid: '',
			data: {}, // 用户信息
			classification: [], // 分类
			prc: 0, // 价格
			showinfo: true,

			current1: -1,

			list: [
				{
					name: '选择主商品',
					disabled: false,
				},
				{
					name: '自主上传',
					disabled: false,
				},
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: '选择主商品',
			defOption: '选择主商品',
			action: 'https://whb.qianjitianxia.com/api/bonus/wx_upload',
			name: '',
			figure: '',
			price: '',
			type: '',
			selAll: [], // 全选
			list1: [
				{
					name: '',
					checked: false,
					disabled: false,
					id: '',
				},
			],
			istianjia1: false,
			istianjia2: false,
			wdrlAmt2: '',
			item1: '',
			item2: '',
			wdrlAmt1: '',
			left: [],
			toplist: [],
			datainfo: [],
			show2d: false,
			figure3: '',
			input_a: '',
			input_b: '',
			shoptij: {
				sp_id: '',
				type: '',
				name: '',
				price: '',
				figure: '',
			},
			shopdata: {
				sid: '',
				page: 1,
				limit: 10,
				type: 0,
				er_type: 0,
			},
			show2c: false,
			catgNm: '',
			classificationId: '',
			lPressTheBox: true,
			status: 'nomore',
			loadText: {
				loadmore: '点击或上拉加载更多',
				loading: '正在加载...',
				nomore: '没有更多了',
			},
			show_xg: false,
			treedata: [],
			list_xg: [],
			fneltext: '点击选择分类',
			fnelid: '',
			show_xg1: false,
			list_xg1: [{ value: 1, label: '修改类别' }, { value: 2, label: '修改信息' }],
		};
	},
	computed: {
		...mapState({
			initData: state => state.init.initData, //初始化数据
			template: state => state.init.templateData.user, //模板数据
			userInfo: state => state.user.userInfo,
			orderNum: state => state.user.orderNum,
			cartNum: state => state.cart.cartNum,
			forceOauth: state => state.user.forceOauth,
		}),
		info() {
			if (this.initData) {
				return this.initData.info;
			}
		},
		popupUser() {
			if (this.initData.popup) {
				return this.initData.popup.content.user;
			}
		},
	},
	onPullDownRefresh() {
		this.init();
	},
	onShow() {
		this.$store.commit('CART_NUM');
		this.init();
		this.$forceUpdate();
	},
	onLoad() {
		this.getUsers();
	},

	methods: {
		//输入分类名称
		shopname1(e) {
			this.catgNm = e.detail.value;
		},
		//修改分类名称
		async modify1(e) {
			if (e == 0) {
				let res = await this.$api('updCatgNm', {
					fid: this.classificationId,
					name: this.catgNm,
				});
				this.show2c = false;
				this.current = 0;
				console.log('this.sid/ :>> ', this.sid);
				this.zhizhufenglei(this.sid);
			} else {
				let data = await this.$api('updCatgNm', {
					fid: this.classificationId,
					name: this.catgNm,
				});
				this.current1 = -1;
				this.show2c = false;
				this.zhizhufenglei(this.sid);
			}
			console.log('修改分类名称 :>> ', res);
		},
		//删除分类
		async del1(e) {
			if (e == 0) {
				let res = await this.$api('delCatgNm', {
					fid: this.classificationId,
				});
				//this.shopdata.type=this.classification.left[0].id;
				this.current = 0;
				this.zhizhufenglei(this.sid);
			} else {
				let data = await this.$api('delCatgNm', {
					fid: this.classificationId,
				});
				this.current1 = -1;
				this.zhizhufenglei(this.sid);
			}
			this.show2c = false;
			console.log('删除分类 :>> ', res);
		},
		//长按
		frstLvllong(id, name) {
			this.lPressTheBox = true;
			this.show2c = true;
			this.catgNm = name;
			this.classificationId = id;
		},
		frstLvllong1(id, name) {
			console.log('kkkkkkssssss');
			this.lPressTheBox = false;
			this.show2c = true;
			this.catgNm = name;
			this.classificationId = id;
		},
		//商品名称
		shopname(e) {
			this.input_a = e.detail.value;
		},
		//商品价格
		shoppice(e) {
			this.input_b = e.detail.value;
		},
		//取消确认
		async choices(e) {
			if (e == 0) {
				this.$refs.uUpload.lists = [];
				this.show2d = false;
			} else {
				var priceReg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
				if (this.figure3 == '' || this.input_a == '') {
					uni.$showMsg('商品信息不能为空');
				} else if (!priceReg.test(this.input_b)) {
					uni.$showMsg('请输入正确的产品价格');
					return false;
				} else {
					this.shoptij.figure = this.figure3;
					this.shoptij.name = this.input_a;
					this.shoptij.price = this.input_b;
					const res = await this.$api('submitProduct', this.shoptij);
					uni.$showMsg(res);
					this.getGoods1();
					this.$refs.uUpload.lists = [];
					this.show2d = false;
				}
			}
		},
		//获取商品弹框
		async huoqutk(id) {
			this.show_xg1 = true;
			const res = await this.$api('huoqutk', {
				cid: id,
			});
			let url = 'https://whb.qianjitianxia.com';
			this.figure3 = res.figure;
			this.$refs.uUpload.lists = [{ url: url + res.figure }];
			this.input_a = res.name;
			this.input_b = res.price;
			this.shoptij.sp_id = res.id;
			this.shoptij.type = res.type_ids;
			console.log('获取商品弹框 :>> ', res);
			this.huoqutklist = res;
		},
		//获取二级
		async huoquerji(item1) {
			console.log('item1111 :>> ', item1);
			console.log('this.sid111:>> ', this.sid);
			const res = await this.$api('huoquerji', {
				fl_id: item1,
				sid: this.sid,
			});
			//this.zhizhufenglei(this.sid);
			uni.$showMsg(res);
			this.toplist = res;
			this.item2 = res[0].id;
			console.log('this.item2 :>> ', this.item2);
			console.log('自主上传 获取二级 :>> ', res);
		},
		//上传 分类一级
		async tianjiafenglei() {
			const res = await this.$api('tianjiafenglei', {
				sid: this.sid, // 商家id
				type: 0, // 分类id 为0时 一级
				name: this.wdrlAmt1, // 分类名
			});
			this.zhizhufenglei(this.sid);

			uni.$showMsg(res);
			//console.log('自主上传 一级分类 :>> ', res);
		},
		//上传 分类二级
		async tianjiafenglei2() {
			console.log('this.sid :>> ', this.sid);
			console.log('this.item1 :>> ', this.item1);
			console.log('this.wdrlAmt12 :>> ', this.wdrlAmt2);
			const res = await this.$api('tianjiafenglei', {
				sid: this.sid, // 商家id
				type: this.item1, // 分类id 为0时 一级
				name: this.wdrlAmt2, // 分类名
			});
			this.zhizhufenglei(this.sid);

			uni.$showMsg(res);
			this.huoquerji(this.item1);
			console.log('自主上传 二级分类 :>> ', res);
		},
		//获取 分类
		async zhizhufenglei(sid) {
			//console.log('自主上传 :>> ', sid);
			const res = await this.$api('zhizhufenglei', {
				sid: sid,
			});
			this.classification = res;
			this.left = res.left;
			//this.toplist = res.top_list;
			this.item1 = res.left[0].id;
			this.shopdata.type = res.left[0].id;
			this.shopdata.er_type = 0;
			this.item2 = res.top_list[0].id;
			console.log(res);
			this.huoquerji(res.left[0].id);
			this.getGoods1();
			console.log('获取             分类 :>> ', res);
		},

		confirm1() {
			if (!this.wdrlAmt1) {
				return uni.$showMsg('不能为空');
			}
			this.tianjiafenglei();
		},
		confirm2() {
			if (!this.wdrlAmt2) {
				return uni.$showMsg('不能为空');
			}
			this.tianjiafenglei2();
		},

		tianjia2() {
			this.wdrlAmt2 = '';
			this.istianjia2 = true;
		},
		tianjia1() {
			this.wdrlAmt1 = '';
			this.istianjia1 = true;
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			//console.log(e);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			//console.log(e);
			this.selAll = e;
		},
		// 全选
		checkedAll() {
			this.list.map(val => {
				val.checked = true;
			});
		},
		// 上传商品图
		success2(index, lists) {
			this.figure  = index.replace(/^\"|\"$/g, '');
			//this.figure = `${this.figure},${index}`; 
			console.log('this.figure :>> ', this.figure);
			//this.$refs.uUpload1.lists.length=1
			console.log(' this.$refs.uUpload1 :>> ',  this.$refs.uUpload1);
		},
		// 上传商品图
		success3(index, lists) {
			this.figure3 = index.replace(/^\"|\"$/g, '');
			console.log('this.figure3 :>> ', this.figure3);
		},
		//删除图片
		remove(index, lists) {
			this.figure3 = '';
		},
		// 上传商品
		async selfUpload() {
			var priceReg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
			if (this.figure == '' || this.name == '') {
				uni.$showMsg('商品信息不能为空');
			} else if (!priceReg.test(this.price)) {
				uni.$showMsg('请输入正确的产品价格');
			} else {
				const res = await this.$api('addTo', {
					sid: this.sid,
					sp_id: 0,
					type: this.fnelid,
					name: this.name,
					figure: this.figure,
					price: this.price,
				});
				uni.$showMsg('商品添加成功');
				console.log('上传商品 :>> ', res);
				
				this.type = '';
				this.name = '';
				this.figure = '';
				this.price = '';
				this.fneltext='点击选择分类',
				his.$refs.uUpload1.lists.length = 0
			}
		},
		confirm(e) {
			console.log('e :>> ', e);
			uni.setNavigationBarTitle({
				title: this.defOption,
			});
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			console.log(e);
			this.defOption = e;
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			console.log(e);
		},
		// 获取店id
		async usermerchants(uid) {
			const res = await this.$api('usermerchants', {
				uid: uid,
			});
			if (res) {
				this.sid = res;
				this.shopdata.sid = res;
				console.log('this.sid :>> ', this.sid);
				this.zhizhufenglei(res);
				this.getfen();
			} else {
				uni.$showMsg('获取店铺id失败');
			}
			//this.getGoods1();
		},
		// 获取商品
		async getGoods1() {
			const res = await this.$api('getGoods1', this.shopdata);
			this.datainfo = res.data;
		},
		// 获取用户的id
		async getUsers() {
			const res = await this.$api('user.info');
			this.uid = res.data.id;
			var uid = res.data.id;
			this.usermerchants(res.data.id);
			this.huoquerji(res.data.id);
			console.log('uid111111:>> ', uid);
		},
		...mapActions(['getUserInfo', 'getOrderNum']),
		// 初始化
		init() {
			return Promise.all([this.getUserInfo(), this.getOrderNum()])
				.then(() => {
					uni.stopPullDownRefresh();
				})
				.catch(() => {
					uni.stopPullDownRefresh();
				});
		},

		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query,
			});
		},
		getbgcolor(e) {
			this.bgcolor = e;
		},
		//
		// 点击左边的栏目切换
		async swichMenu(index, item1) {
			//this.getGoods(item1);
			this.item1 = item1;
			//this.erji(item1);
			this.huoquerji(item1);
			this.shopdata.type = item1;
			this.shopdata.er_type = 0;
			this.getGoods1();
			console.log('item1 :>> ', item1);
			if (index == this.current) return;
			this.current = index;
			this.current1 = -1;
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('menu-scroll-view', 'menuHeight');
				await this.getElRect('u-tab-item1', 'menuItemHeight');
			}
			// 将菜单菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		// 点击右边的栏目切换
		async swichMenu1(index, item2) {
			//this.getGoods(item1);
			console.log('item2 :>> ', item2);
			this.shopdata.er_type = item2;
			this.item2 = item2;
			this.getGoods1();

			if (index == this.current1) return;
			this.current1 = index;
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('menu-scroll-view', 'menuHeight');
				await this.getElRect('u-tab-item1', 'menuItemHeight');
			}
			// 将菜单菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		//全部查询
		swichMenu_a(index, e) {
			this.current1 = index;
			this.shopdata.er_type = e;
			this.getGoods1();
		},
		// 获取一个目标元素的高度
		getElRect(elClass, dataVal) {
			new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.' + elClass)
					.fields({ size: true }, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					})
					.exec();
			});
		},
		async getfen() {
			const res = await this.$api('tree', {
				sid: this.sid,
			});
			this.treedata = res;
			console.log(res + 'ewfffffffffffffffff');
		},
		//加载更多商品
		loadshop() {
			console.log('kk');
		},
		//选择修改分类
		ification_xg() {
			this.list_xg = [];
			this.show_xg = true;
			this.treedata.forEach((item, index) => {
				this.list_xg.push({ value: item.id, label: item.name, children: [] });
				item.data.forEach((item1, index1) => {
					this.list_xg[index].children.push({ value: item1.id, label: item1.name });
				});
			});
		},
		//选择修改分类
		confirm_xg(e) {
			console.log(e);
			this.fneltext = e[1].label;
			this.fnelid = e[1].value;
			console.log(this.fnelid);
		},
		//选择修改那个信息
		confirm_xg1(e) {
			console.log(e);
			if (e[0].value == 1) {
				this.list_xg = [];
				this.show_xg = true;
				this.treedata.forEach((item, index) => {
					this.list_xg.push({ value: item.id, label: item.name, children: [] });
					item.data.forEach((item1, index1) => {
						this.list_xg[index].children.push({ value: item1.id, label: item1.name });
					});
				});
				console.log(this.list_xg);
			} else {
				this.show2d = true;
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.wrap-box {
	.shoppingCart {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 68rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #e7e4e4;
		.text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
		.text1 {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ecc177;
		}
	}
	.info {
		height: 121rpx;
		display: flex;
		align-items: center;
		margin: 20rpx 30rpx 0 30rpx;
		.left {
			width: 121rpx;
			height: 121rpx;
			image {
				width: 121rpx;
				height: 121rpx;
			}
		}
		.right {
			margin-left: 18rpx;
			flex: 1;
			height: 121rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.r1 {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.add {
				display: flex;
				justify-content: space-between;
				.moeny {
					width: 200rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ff0000;
				}
				.add1 {
					display: flex;
					align-items: center;
					justify-content: center;

					.textt {
						display: inline-block;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						background-color: #ebbc6f;
						color: #ffffff;
					}
					.num {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						margin: 0 10rpx;
					}
				}
			}
		}
	}

	/deep/.u-mask {
		display: flex;
		align-items: center;
		justify-content: center;
		.bulletFrm {
			width: 630rpx !important;
			margin: 0 auto;
			line-height: 50%;
			//height: 590rpx !important;
			background: #ffffff !important;
			border-radius: 20rpx !important;
			overflow: hidden;

			.image {
				width: 100%;
				height: 300rpx;
				//background-color: #366092;
				image {
					width: 100%;
					height: 300rpx;
				}
			}
			.image1 {
				position: relative;
				height: 290rpx;
				padding: 32rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.dianhu {
					position: absolute;
					top: 50%;
					right: 33rpx;
					transform: translateY(-50%);
					width: 121rpx;
					height: 121rpx;
					image {
						width: 121rpx;
						height: 121rpx;
					}
				}
				.text {
					// height: 77rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.text1 {
					display: flex;
					align-items: center;
					// justify-content: ;
					text:nth-child(1) {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 160rpx;
						height: 60rpx;
						border: 1rpx solid #e9b562;
						border-radius: 10rpx;
						color: #e9b562;
						margin-right: 10rpx;
					}
					text:nth-child(2) {
						// width: 174px;
						// height: 23px;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
					}
				}
				.text2 {
					// width: 447px;
					// height: 28px;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
	.user-box {
		.tianjiajia {
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			text-align: center;
			background-color: #e9b562;
			border-radius: 40rpx;

			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}
		.content {
			.shopp {
				width: 100vw;
				height: 100%;
				overflow: scroll;
				display: flex;
				.tianjia1 {
					//	width: 207rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					font-size: 25rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #333333;
					//background-color: #fff;
				}
				.bulletFrm33 {
					width: 630rpx !important;
					//height: 590rpx !important;
					background: #ffffff !important;
					border-radius: 20rpx !important;
					overflow: hidden;
					//	padding: 29rpx;
					display: flex;
					flex-direction: column;
					.shop_xx {
						display: flex;
						flex-flow: row;
						justify-content: flex-start;
						align-items: center;
						font-size: 24rpx;
						margin-bottom: 10rpx;
					}
					input {
						width: 400rpx;
						font-size: 24rpx;
						padding-left: 10rpx;
					}
					.choice {
						width: 100%;
						height: 80rpx;
						//color: 24rpx;
						display: flex;
						//flex-flow: row;
						justify-content: center;
						align-items: center;
						border-top: 1rpx solid #666;

						.cancel {
							width: 50%;
							height: 80rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							//border-radius: 10rpx ;
							color: #666;
							border-right: 1rpx solid #666;
						}
						.determine {
							width: 50%;
							height: 80rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #ffffff;
							//border-radius: 10rpx ;
							color: red;
						}
						// view {
						// 	width: 80rpx;
						// 	height: 40rpx;
						// 	text-align: center;
						// 	line-height: 40rpx;
						// 	font-size: 24rpx;
						// 	background-color: #e8a36c;
						// 	border-radius: 20rpx;
						// }
						// view:last-child {
						// 	margin-left: 50rpx;
						// 	background-color: #3377ff;
						// }
					}
				}
				.u-tab-view {
					width: 207rpx;

					height: 100%;
					overflow: scroll;
					.u-tab-item {
						height: 77rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						text {
							line-height: 24rpx;
							height: 24rpx;
							font-size: 25rpx;
							font-family: SourceHanSansCN;
							font-weight: 400;
							color: #333333;
						}
					}
					.u-tab-item-active {
						background-color: #fff;
						text {
							color: #e8a36c;
						}
					}
				}
				.shopp1 {
					width: 651rpx;
					padding-left: 15rpx;
					.erjifenglei {
						width: 543rpx;
						height: 60rpx;
						line-height: 60rpx;
						overflow: scroll;
						white-space: nowrap;

						text {
							padding: 5rpx 19rpx;
							display: inline-block;
							//width: 90rpx;
							//height: 50rpx;
							line-height: 44rpx;
							text-align: center;
							font-size: 25rpx;
							margin-right: 10rpx;
							border-radius: 10rpx;
							//background-color: #fff;
						}
						view {
							border-radius: 10rpx;
							//padding: 5rpx 19rpx;
							text {
								// margin: 5rpx 19rpx;
								// border-radius: 10rpx;
								//background-color: #FFFFFF;
							}
						}

						.u-tab-item-active {
							color: #fff;

							background-color: #e8a36c;
						}
					}

					.bulletFrm22 {
						width: 630rpx !important;
						//height: 590rpx !important;
						background: #ffffff !important;
						border-radius: 20rpx !important;
						overflow: hidden;
						//padding: 29rpx;
						display: flex;
						flex-direction: column;
						.shop_xx {
							display: flex;
							flex-flow: row;
							justify-content: flex-start;
							align-items: center;
							font-size: 24rpx;
							margin-bottom: 10rpx;
						}
						input {
							width: 400rpx;
							font-size: 24rpx;
							padding-left: 10rpx;
						}
						.choice {
							width: 100%;
							height: 80rpx;
							//color: 24rpx;
							display: flex;
							//flex-flow: row;
							justify-content: center;
							align-items: center;
							border-top: 1rpx solid #666;

							.cancel {
								width: 50%;
								height: 80rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								//border-radius: 10rpx ;
								color: #666;
								border-right: 1rpx solid #666;
							}
							.determine {
								width: 50%;
								height: 80rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #ffffff;
								//border-radius: 10rpx ;
								color: red;
							}

							// view {
							// 	width: 80rpx;
							// 	height: 40rpx;
							// 	text-align: center;
							// 	line-height: 40rpx;
							// 	font-size: 24rpx;
							// 	background-color: #e8a36c;
							// 	border-radius: 20rpx;
							// }
							// view:last-child {
							// 	margin-left: 50rpx;
							// 	background-color: #3377ff;
							// }
						}
					}

					.u-tab-item1 {
						width: 100%;
						height: 160rpx;
						margin-bottom: 20rpx;
						display: flex;
						image {
							width: 160rpx;
							height: 160rpx;
							margin-right: 21rpx;
						}
						.list {
							display: flex;
							flex: 1;
							flex-direction: column;
							justify-content: space-between;
							.text {
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
							}
							.list1 {
								display: flex;
								flex-flow: row;
								justify-content: space-between;
								align-items: center;
								margin-bottom: 10rpx;
								padding-right: 10rpx;
								text {
									font-size: 30rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #ff0000;
								}
								view {
									background-color: #e8a36c;
									font-size: 24rpx;
									width: 120rpx;
									color: #ffffff;
									height: 40rpx;
									text-align: center;
									line-height: 40rpx;
									border-radius: 20rpx;
								}
							}
						}
					}
					.u-tab-iteminfo {
						display: flex;
						background-color: #eeeeee;
						//border: 1rpx solid #000000;
						.xingxi {
							margin-left: 20rpx;
							flex: 1;
							display: flex;
							justify-content: space-around;
							flex-direction: column;
							.fenl {
								width: 150rpx;
								font-size: 24rpx;
								height: 44rpx;
								color: #333333;
							}
							.mingcheng {
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
								input {
									height: 23rpx;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 400;
								}
							}
							.tianjia22 {
								.text1 {
									border-radius: 20rpx;
									padding: 5rpx 20rpx;
									color: #ffffff;
									background-color: #e9b562;
								}
							}
							.jiage {
								display: flex;
								height: 40rpx;
								align-items: center;
								justify-content: space-between;
								.text {
									font-size: 30rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #ff0000;
									input {
										width: 180rpx;
										height: 23rpx;
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 400;
									}
								}
								.text1 {
									display: flex;
									justify-content: center;
									align-items: center;
									vertical-align: middle;
									width: 40rpx;
									height: 40rpx;
									background-color: #e9b562;
									color: #ffffff;
									border-radius: 40rpx;
								}
							}
						}
					}
					.u-tab-view1 {
						//height: 900rpx;
						margin-top: 15rpx;
					}
					.u-tab-item1 {
						width: 100%;
						height: 160rpx;
						margin-top: 20rpx;
						margin-bottom: 15rpx;
						display: flex;
						padding: 20rpx;
						image {
							width: 160rpx;
							height: 160rpx;
							margin-right: 21rpx;
						}
						.list {
							display: flex;
							flex: 1;
							flex-direction: column;
							justify-content: space-between;
							.text {
								height: 28rpx;
								line-height: 28rpx;
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
							}
							.list1 {
								display: flex;
								justify-content: space-between;
								align-items: center;
								text:nth-child(1) {
									height: 23rpx;

									font-size: 30rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #ff0000;
								}
								text:nth-child(2) {
									display: inline-block;
									width: 40rpx;
									display: flex;
									align-items: center;
									justify-content: center;

									background: linear-gradient(90deg, #e9b562, #eecb88);
									border-radius: 50%;
									color: #ffffff;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
